<template>
  <div>
    <div class="crumbs">
      <router-link to="/article/topclassadd">
        <el-button>添加顶级文章分类</el-button>
      </router-link>
    </div>
    <el-tree :data="tree"
             :props="defaultProps"
             node-key="id"
             :expand-on-click-node="false"
             :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          children: '_child',
          label: 'name'
        }
      }
    },
    computed: {
      ...mapState({
        tree: state => state.article.classTree
      })
    },
    created () {
      this.classTree()
    },
    methods: {
      // 获取文章分类树
      async classTree () {
        await this.$store.dispatch('article/classTree')
      },
      renderContent (createElement, {node, data, store}) {
        const self = this
        if (!data._child) {
          return createElement('span', {
            attrs: {
              style: 'white-space: normal; width: 100%;'
            }
          }, [
            createElement('span', node.label),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 20px'
              }
            }, [
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'info'
                },
                on: {
                  click: function () {
                    self.$router.push({name: 'ArticleSubClassAdd', params: {pid: data.id, key: data.key}})
                  }
                }
              }, '添加子分类'),
              createElement('el-button', {
                attrs: {
                  size: 'mini'
                },
                on: {
                  click: function () {
                    self.$store.commit('article/ARTICLE_CLASS_SAVE_DATA', data)
                    self.$router.push('/article/topclassedit')
                  }
                }
              }, '编辑'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'success'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id,
                      key: data.key
                    }
                    self.$store.dispatch('article/classStart', payload).then(res => {
                      self.classTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '启用'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'warning'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id,
                      key: data.key
                    }
                    self.$store.dispatch('article/classStop', payload).then(res => {
                      self.classTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '禁用'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'danger'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id,
                      key: data.key
                    }
                    self.$store.dispatch('article/classDel', payload).then(res => {
                      self.classTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '删除')
            ]),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 30px'
              }
            }, [createElement('span', '已' + data.status_text)])
          ])
        } else {
          return createElement('span', {
            attrs: {
              style: 'white-space: normal; width: 100%;'
            }
          }, [
            createElement('span', node.label),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 20px'
              }
            }, [
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'info'
                },
                on: {
                  click: function () {
                    self.$router.push({name: 'ArticleSubClassAdd', params: {pid: data.id, key: data.key}})
                  }
                }
              }, '添加子分类'),
              createElement('el-button', {
                attrs: {
                  size: 'mini'
                },
                on: {
                  click: function () {
                    self.$store.commit('article/ARTICLE_CLASS_SAVE_DATA', data)
                    self.$router.push('/article/topclassedit')
                  }
                }
              }, '编辑'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'success'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id,
                      key: data.key
                    }
                    self.$store.dispatch('article/classStart', payload).then(res => {
                      self.classTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '启用'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'warning'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id,
                      key: data.key
                    }
                    self.$store.dispatch('article/classStop', payload).then(res => {
                      self.classTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '禁用')
            ]),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 30px'
              }
            }, [createElement('span', '已' + data.status_text)])
          ])
        }
      }
    }
  }
</script>
